<template>
	<view class="wrap bggrey page-yuebao">
		<view class="flex-page">
			<view class="flex-scroll">
				<u-navbar  @leftClick="navigateBack" leftIconColor="#ffffff" ref="navbar" :titleStyle="{ color: '#ffffff' }" :bgColor="bgColor"
					title="余额宝" :safeAreaInsetTop="false"></u-navbar>
				<view class="flex-scroll-container" :style="{ marginTop: navbarHeight }" style="padding-top: 1rem;">
					<view class="scroll-view">

						<view class="padding">
							<view class="yubao-head">
								<view class="title-row fcc">
									<view class="fc">
										<image style="width: 0.6rem;" src="@/static/img/my/yueb-ok.png" mode="widthFix">
										</image>
										<text class="span">买入余额宝</text>
									</view>
									<image class="line" src="@/static/img/my/yueb-line.png" mode="widthFix"></image>
									<view class="fc">
										<image style="width: 0.6rem;" src="@/static/img/my/yueb-ok.png" mode="widthFix">
										</image>
										<text class="span">每24小时发放收益</text>
									</view>
									<image class="line" src="@/static/img/my/yueb-line.png" mode="widthFix"></image>
									<view class="fc">
										<image style="width: 0.6rem;" src="@/static/img/my/yueb-ok.png" mode="widthFix">
										</image>
										<text class="span">本金随时领取</text>
									</view>
								</view>
								<view class="con ">
									<view class="title">
										日收益率
									</view>
									<view class="b"><text class="rate-tag">0.01</text>%</view>
									<text>
										买入项目：余额宝
									</text>
									<swiper class="mySwiper" style="height: 3rem;">
										<swiper-item>
											<view class="swiper-slide">
												<view class="lines fcc">
													<image src="@/static/img/my/yuebao-lines.png" alt=""></image>
												</view>
												<view class="dq">
													每满 <text class="red" id="c_tianshu">24小时</text> 发放收益
												</view>
											</view>
										</swiper-item>

									</swiper>
									<view class="tip fc">
										友情提示：买入余额宝后每满24小时自动发放收益到您的账户中，本金可随时领取（领取后不再发放收益）
									</view>

								</view>
							</view>
							<view class="tab-bar-box tab-bar-box-center J-nav-tab">
								<u-tabs :list="tabs" @click="changeTab"></u-tabs>
							</view>
							
							<view>
							</view>
						</view>
					</view>
				</view>
				<view class="flex-scroll-fixed">
					<view class="footer-box-wrap">
						<view class="footer-height"></view>
						<view class="footer-box w750">
							<view class="m022 flex1">
								<button @click="buyNow" class="btn-blue w100 fcc" id="c_zbmr">
									<text>立即买入</text>
								</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgColor: 'transparent',
				navbarHeight: 0,
				tabs: [{
					name: '交易记录',
					typeid: ''
				}, {
					name: '了解余额宝',
					typeid: 0
				}, {
					name: '买入详情',
					typeid: 1
				}]
			}

		},
		mounted() {
			this.$nextTick(() => {
				const navbarElement = this.$refs.navbar.height;
				this.navbarHeight = navbarElement
				console.log(this.navbarHeight);
			});
		},
		methods: {
			
			navigateBack() {
				uni.switchTab({
					url: '/pages/tabBar/my/index'
				});
			},
			switchTab(tabId) {
				// 处理切换选项卡的逻辑
			},
			buyNow() {
				// 处理立即买入的逻辑
			},
		},
	};
</script>

<style scoped>
	/deep/uni-view[data-v-3b2b1a80],
	uni-scroll-view[data-v-3b2b1a80],
	uni-swiper-item[data-v-3b2b1a80] {
		margin: 0 auto;
	}
	
	/deep/.u-tabs__wrapper__nav__item {
		padding: 0 1rem;
	}
	
	.page-yuebao {
		background: url('@/static/img/my/yueb-headbg.png') 0 0 no-repeat #E9ECF0;
		background-size: contain;
		position: relative;
	}

	.span {
		line-height: 0.8rem;
	}
</style>